<template>
    <view class="layout">
        <view class="goBack" @click="goBack" :style="{top:statusBarHeight+'px'}">
            <view class="backbtn">
                <uni-icons type="back" color="#fff" size="20"></uni-icons>
            </view>
            <text>排行榜</text>
            <view class="kong">
            </view>
        </view>

        <view class="bg">
            <image class="wallet" src="../../static/bg_rank.png" mode="top"></image>
        </view>
        <view class="content" v-if="usertype == 2">
            <view class="segmented">
                <uni-segmented-control class="segmented-control" :current="current" :values="items"
                    style-type="button" active-color="#ef3421" @clickItem="onClickItem" />
            </view>
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                @scrolltolower="lower" @scroll="scroll">
                <view class="rank-list">
                    <view class="rank-first">
                        <image class="bg" src="../../static/bg_one.png" mode="aspectFill"></image>
                        <view class="header">
                            <image class="icon" :src="firstUer.avatar" mode="aspectFill"></image>
                            <view class="nickname">
                                {{firstUer.nickname}}
                            </view>
                        </view>
                        <view class="score" v-if="usertype!= 1">
                            <!-- <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image> -->
                            <view class="money">
                                {{firstUer.userscore}}
                            </view>
                        </view>
                    </view>
                    <view class="rank-first">
                        <image class="bg" src="../../static/bg_two.png" mode="aspectFill"></image>
                        <view class="header">
                            <image class="icon" :src="secondUser.avatar" mode="aspectFill"></image>
                            <view class="nickname">
                                {{secondUser.nickname}}
                            </view>
                        </view>
                        <view class="score" v-if="usertype!= 1">
                            <!-- <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image> -->
                            <view class="money">
                                {{secondUser.userscore}}
                            </view>
                        </view>
                    </view>
                    <view class="rank-first">
                        <image class="bg" src="../../static/bg_three.png" mode="aspectFill"></image>
                        <view class="header">
                            <image class="icon" :src="thirdUser.avatar" mode="aspectFill"></image>
                            <view class="nickname">
                                {{thirdUser.nickname}}
                            </view>
                        </view>
                        <view class="score" v-if="usertype!= 1">
                            <!-- <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image> -->
                            <view class="money">
                                {{thirdUser.userscore}}
                            </view>
                        </view>
                    </view>
                    <view class="rank-norml" v-for="(item,index) in list">
                        <view class="rank-num">
                            <text>{{index + 4}}</text>
                        </view>
                        <view class="header">
                            <image class="icon" :src="item.avatar" mode="aspectFill"></image>
                            <view class="nickname">
                                {{item.nickname}}
                            </view>
                        </view>
                        <view class="money">
                            <text>{{item.userscore}}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
    import { getStatusBarHeight, getNavBarHeight, rpxToPx, pxToRpx } from "@/utils/system.js";
    import { onLoad, onShow, onReady, onBackPress } from "@dcloudio/uni-app";
    import { getTodayDateString } from '../../utils/common.js';

    export default {
        data() {
            return {
                items: ['日榜', '总榜'],
                dayList: [],
                totalList: [],
                list: [],
                current: 0,
                usertype: 0,
                firstUer: {},
                secondUser: {},
                thirdUser: {},
				statusBarHeight:0
            };
        },
        onLoad: function (e) {
            this.usertype = e.usertype;
        },
        onShow: function () {
            if (this.usertype == 2) {
                this.queryDayRank();
            }
			this.statusBarHeight = getStatusBarHeight();
        },
        methods: {
            onClickItem: function (e) {
                if (this.usertype!= 2) {
                    return;
                }

                if (e.currentIndex == 0) {
                    if (this.dayList.length > 0) {
                        let arr = JSON.parse(JSON.stringify(this.dayList));
                        this.firstUer = arr[0];
                        this.secondUser = arr[1];
                        this.thirdUser = arr[2];
                        this.list = arr.splice(3, arr.length);
                    } else {
                        this.queryDayRank();
                    }
                } else {
                    if (this.totalList.length > 0) {
                        let arr = JSON.parse(JSON.stringify(this.totalList));
                        this.firstUer = arr[0];
                        this.secondUser = arr[1];
                        this.thirdUser = arr[2];
                        this.list = arr.splice(3, arr.length);
                    } else {
                        this.queryTotalRank();
                    }
                }
            },
            queryDayRank: function () {
                uni.request({
                    url: 'https://fc-mp-b4609b89-f010-4b4d-8ed3-0087451c83a0.next.bspapp.com/getRank/getRankByDay',
                    method: 'POST',
                    success: (userInfo) => {
                        if (userInfo && userInfo.data && userInfo.data.data) {
                            let arr = userInfo.data.data;
                            this.firstUer = arr[0];
                            this.secondUser = arr[1];
                            this.thirdUser = arr[2];
                            this.dayList = JSON.parse(JSON.stringify(arr));
                            this.list = arr.splice(3, arr.length);
                        }
                    }
                });
            },
            queryTotalRank: function () {
                uni.request({
                    url: 'https://fc-mp-b4609b89-f010-4b4d-8ed3-0087451c83a0.next.bspapp.com/getRank/getRankByTotal',
                    method: 'POST',
                    success: (userInfo) => {
                        if (userInfo && userInfo.data) {
                            let arr = userInfo.data.data;
                            this.firstUer = arr[0];
                            this.secondUser = arr[1];
                            this.thirdUser = arr[2];
                            this.totalList = JSON.parse(JSON.stringify(arr));
                            this.list = arr.splice(3, arr.length);
                        }
                    }
                });
            },
            goBack: function () {
                uni.navigateBack({
                    success: () => { },
                    fail: () => {
                        uni.reLaunch({
                            url: '/pages/index/shouye'
                        });
                    }
                });
            }
        }
    };
</script>

// <!-- // scss 语言类型  scoped css样式的类名仅限当前页面 不污染其它页面 -->
<style lang="scss">
	.layout {
		width: 100%;
		height: 100vh;
		position: relative;

		.goBack {
			position: fixed;
			margin-left: 10rpx;
			width: 100%;
			height: 38px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			z-index: 1000;

			.backbtn {
				background: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				backdrop-filter: blur(10rpx);
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			text {
				color: #333;
				font-size: 40rpx;
				font-weight: 600;
			}

			.kong {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.bg {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			position: absolute;
			top: 160rpx;
			left: 0rpx;
			// margin-top: 160rpx;
			// margin-left: 0rpx;
			width: 100%;
			height: calc(100vh - 200rpx);

			.segmented {
				position: relative;
				margin: auto;
				width: 400rpx;
				height: 70rpx;
				background-color: white;
			}

			.scroll-Y {
				position: relative;
				margin-top: 0rpx;
				width: 100%;
				height: calc(100vh - 280rpx);
			}

			.rank-list {
				position: relative;
				width: 100%;
				margin-top: 50rpx;
				height: 100%;

				.rank-first {
					position: relative;
					margin-left: 50rpx;
					width: calc(100vw - 100rpx);
					height: 200rpx;
					margin-top: 20rpx;
					position: relative;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 20rpx;

					.bg {
						position: absolute;
						margin-left: 10rpx;
						margin-top: 0rpx;
						width: 273rpx;
						height: 80rpx;
					}

					.header {
						position: relative;
						width: 150rpx;
						height: 150rpx;
						top: 50rpx;
						margin-left: 80rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon {
							height: 100rpx;
							width: 100rpx;
							border-radius: 50%;
						}

						.nickname {
							display: inline-block;
							margin-top: 10rpx;
							width: 100%;
							height: 30rpx;
							color: white;
							font-size: 25rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}

					.score {
						position: absolute;
						top: 90rpx;
						left: 180rpx;
						height: 60rpx;
						width: 550rpx;
						align-items: center;
						display: flex;
						flex-direction: row;
						font-size: 22px;
						font-weight: 700;
						margin-left: 30rpx;
						padding: 5rpx 10rpx;
						border-radius: 45rpx;

						.nickname {}

						.money {
							color: white;
							margin-left: 20rpx;
							margin-right: 20rpx;
							font-size: 55rpx;
							color: #efefef;
						}
					}
				}

				.rank-norml {
					display: flex;
					position: relative;
					margin-left: 50rpx;
					width: calc(100vw - 100rpx);
					height: 140rpx;
					margin-top: 20rpx;
					position: relative;
					background-color: $uni-bg-color-mask;
					border-radius: 20rpx;
					align-items: center;
					justify-content: flex-start;

					.rank-num {
						margin-left: 10rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						backdrop-filter: blur(10rpx);
						border: 1rpx solid rgba(255, 255, 255, 0.3);
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							color: white;
							font-size: 26rpx;
						}
					}

					.header {
						position: relative;
						width: 160rpx;
						height: 120rpx;
						top: 10rpx;
						margin-left: 0rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon {
							height: 80rpx;
							width: 80rpx;
							border-radius: 50%;
						}

						.nickname {
							display: inline-block;
							margin-top: 5rpx;
							width: 100%;
							height: 30rpx;
							color: white;
							font-size: 25rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}

					.money {
						margin-left: 30rpx;
						margin-top: 0rpx;
						width: 200rpx;
						height: 60rpx;

						text {
							width: 100%;
							height: 100%;
							color: white;
							font-size: 55rpx;
							color: #efefef;
						}

					}

				}
			}

		}

	}
</style>